<template>
	<view class="container">
		<!-- 灵活购水区 -->
		<view class="purchase-section">
			
			
			<!-- 按量购买 -->
			<view class="purchase-type">
				<view class="type-header">
					<text class="sub-title">按量购买</text>
					<text class="sub-desc">自由选择购水量</text>
				</view>
				<view class="base-packages">
					<view class="package-item" 
						  v-for="(item, index) in basePackages" 
						  :key="index" 
						  @click="selectPackage(item, index)"
						  :class="{'package-selected': selectedPackage === index}">
						<view class="package-content">
							<text class="amount">{{item.amount}}<text class="unit">L</text></text>
							<text class="price">￥{{item.price}}</text>
							<text class="price-per" v-if="item.pricePerL">￥{{item.pricePerL}}/L</text>
							<text class="save-text" v-if="item.savePercent">省{{item.savePercent}}%</text>
						</view>
					</view>
				</view>
				
				<!-- 智能推荐 -->
				<view class="smart-recommend" v-if="recommendAmount">
					<view class="recommend-content">
						<uni-icons type="info-filled" size="16" color="#1989fa"></uni-icons>
						<text>根据您家上月用量，建议购买</text>
						<text class="recommend-amount">{{recommendAmount}}L</text>
					</view>
				</view>
			</view>
			
			<!-- 周期套餐 -->
			<view class="purchase-type">
				<view class="sub-title">周期套餐</view>
				<view class="period-packages">
					<view class="package-item" v-for="(item, index) in periodPackages" :key="index" @click="selectPeriodPackage(item)">
						<text class="title">{{item.title}}</text>
						<text class="desc">{{item.description}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 促销专题 -->
		<view class="promotion-section">
			<view class="section-header">
				<text class="title">促销专题</text>
				<text class="subtitle">限时特惠</text>
				<view class="countdown" v-if="countdown">
					<text class="countdown-label">距结束</text>
					<text class="countdown-time">{{countdown.hours}}:{{countdown.minutes}}:{{countdown.seconds}}</text>
				</view>
			</view>

			<view class="promotion-list">
				<view class="promotion-item" 
					  v-for="(item, index) in promotions" 
					  :key="index"
					  @click="selectPromotion(item, index)"
					  :class="{'promotion-selected': selectedPromotion === index}">
					<view class="promotion-content">
						<view class="promotion-info">
							<text class="promotion-title">{{item.title}}</text>
							<text class="promotion-desc">{{item.description}}</text>
							<view class="price-info">
								<text class="current-price">￥{{item.price}}</text>
							</view>
						</view>
						<view class="promotion-tag" v-if="item.tag">{{item.tag}}</view>
					</view>
					<view class="promotion-footer">
						<view class="subsidy-info" v-if="subsidyInfo">
							<uni-icons type="info" size="12" color="#1989fa"></uni-icons>
							<text>{{subsidyInfo}}</text>
						</view>
						<button class="buy-btn" >立即购买</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 交易看板 -->
		<view class="transaction-section">
			<view class="section-title">交易看板</view>
			<view class="current-price">
				<text class="price-title">当前水价</text>
				<text class="price-value">￥{{currentPrice}}/L</text>
				<text class="subsidy-info" v-if="subsidyInfo">{{subsidyInfo}}</text>
			</view>
			
			<view class="purchase-history" @click="viewHistory">
				<text>历史采购记录</text>
					<u-icon name="arrow-right" size="15"></u-icon>
			</view>
			
			<view class="water-transfer" @click="handleTransfer">
				<text>电子水票转赠</text>
				<u-icon name="arrow-right" size="15"></u-icon>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			basePackages: [
				{ 
					amount: 100, 
					price: 200,
					pricePerL: 2.0,
					savePercent: null
				},
				{ 
					amount: 200, 
					price: 380,
					pricePerL: 1.9,
					savePercent: 5
				},
				{ 
					amount: 500, 
					price: 900,
					pricePerL: 1.8,
					savePercent: 10
				}
			],
			periodPackages: [
				{
					title: '月卡',
					description: '无限畅饮（夜间23:00-5:00限流）',
					price: '299'
				},
				{
					title: '季卡',
					description: '赠送10%水量',
					price: '799'
				},
				{
					title: '年卡',
					description: '免费升级VIP水质监测',
					price: '2999'
				}
			],
			promotions: [
				{
					title: '新户首充礼',
					description: '充300L送50L',
					price: '300',
					tag: '新人专享'
				},
				{
					title: '家庭共享卡',
					description: '可绑定3个用水账号',
					price: '599',
					tag: '家庭优选'
				},
				{
					title: '企业专属采购',
					description: '企业专属价格通道',
					price: '详询客服',
					tag: '企业专享'
				}
			],
			recommendAmount: 300,
			currentPrice: 2,
			subsidyInfo: '政府补贴0.5元/L',
			selectedPackage: -1,
			selectedPromotion: -1,
			countdown: {
				hours: '23',
				minutes: '59',
				seconds: '59'
			},
		}
	},
	methods: {
		selectPackage(pkg, index) {
			this.selectedPackage = index;
			uni.showModal({
				title: '确认购买',
				content: `确认购买${pkg.amount}L水量？\n单价：￥${pkg.pricePerL}/L`,
				success: (res) => {
					if (res.confirm) {
						this.handlePurchase(pkg)
					} else {
						this.selectedPackage = -1;
					}
				}
			})
		},
		selectPeriodPackage(pkg, index) {
			this.selectedPromotion = index;
			uni.showModal({
				title: '确认购买',
				content: `确认购买${pkg.title}？\n价格：￥${pkg.price}`,
				success: (res) => {
					if (res.confirm) {
						this.handlePurchase(pkg)
					} else {
						this.selectedPromotion = -1;
					}
				}
			})
		},
		selectPromotion(pkg, index) {
			this.selectedPromotion = index;
			uni.showModal({
				title: '确认购买',
				content: `确认购买${pkg.title}？\n价格：￥${pkg.price}`,
				success: (res) => {
					if (res.confirm) {
						this.handlePurchase(pkg)
					} else {
						this.selectedPromotion = -1;
					}
				}
			})
		},
		handlePurchase(pkg) {
			// 处理购买逻辑
			uni.showLoading({
				title: '处理中'
			})
			// TODO: 调用购买API
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '购买成功',
					icon: 'success'
				})
			}, 1500)
		},
		handleNewUserPromo() {
			uni.showToast({
				title: '新用户专享优惠',
				icon: 'none'
			})
		},
		handleFamilyShare() {
			uni.navigateTo({
				url: '/pages/family-share/index'
			})
		},
		handleEnterprise() {
			uni.navigateTo({
				url: '/pages/enterprise/index'
			})
		},
		viewHistory() {
			uni.navigateTo({
				url: '/pages/purchase/history/index'
			})
		},
		handleTransfer() {
			uni.navigateTo({
				url: '/pages/purchase/transfer/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin: 20rpx 0;
	color: #333;
}

.purchase-section, .promotion-section, .transaction-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.sub-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.base-packages, .period-packages {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.package-item {
	width: 31%;
	background: #f8f8f8;
	border-radius: 8rpx;
	padding: 20rpx 10rpx;
	text-align: center;
	margin-bottom: 20rpx;
	
	.amount, .title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.price {
		font-size: 24rpx;
		color: #ff6b6b;
		margin-top: 10rpx;
	}
	
	.desc {
		font-size: 22rpx;
		color: #999;
		margin: 10rpx 0;
	}
}

// 修改周期套餐样式，确保每个item高度一致
.period-packages {
	.package-item {
		height: 200rpx; // 设置固定高度
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}
}

.smart-recommend {
	background: #e6f7ff;
	padding: 20rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	margin: 20rpx 0;
	
	text {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #1890ff;
	}
}

.promotion-section {
	margin-bottom: 30rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.subtitle {
			font-size: 24rpx;
			color: #f56c6c;
			margin-left: 16rpx;
			background: rgba(245, 108, 108, 0.1);
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
		}
		
		.countdown {
			position: absolute;
			right: 0;
			display: flex;
			align-items: center;
			
			.countdown-label {
				font-size: 24rpx;
				color: #666;
				margin-right: 8rpx;
			}
			
			.countdown-time {
				font-size: 28rpx;
				color: #f56c6c;
				font-weight: bold;
				font-family: monospace;
			}
		}
	}
	
	.promotion-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.promotion-item {
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			border: 2rpx solid #e8e8e8;
			transition: all 0.3s ease;
			
			&.promotion-selected {
				border-color: #1989fa;
				background: rgba(25, 137, 250, 0.05);
				transform: translateX(4rpx);
			}
			
			&:active {
				transform: scale(0.99);
			}
			
			.promotion-content {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;
				
				.promotion-info {
					flex: 1;
					
					.promotion-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
						display: block;
					}
					
					.promotion-desc {
						font-size: 26rpx;
						color: #666;
						margin-bottom: 16rpx;
						display: block;
					}
					
					.price-info {
						display: flex;
						align-items: baseline;
						
						.current-price {
							font-size: 40rpx;
							color: #f56c6c;
							font-weight: bold;
							margin-right: 12rpx;
						}
					}
				}
				
				.promotion-tag {
					background: linear-gradient(135deg, #ff9a9e 0%, #f56c6c 100%);
					color: #fff;
					font-size: 22rpx;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-weight: bold;
				}
			}
			
			.promotion-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.subsidy-info {
					display: flex;
					align-items: center;
					
					.uni-icons {
						margin-right: 4rpx;
					}
					
					text {
						font-size: 24rpx;
						color: #1989fa;
					}
				}
				
				.buy-btn {
					background: #1989fa;
					color: #fff;
					font-size: 26rpx;
					padding: 12rpx 32rpx;
					border-radius: 30rpx;
					border: none;
					line-height: 1;
					margin-left: auto;
					margin-right: 20rpx;
					
					&:active {
						opacity: 0.9;
					}
				}
			}
		}
	}
}

.current-price {
	background: #f8f8f8;
	padding: 20rpx;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	
	.price-title {
		font-size: 26rpx;
		color: #666;
	}
	
	.price-value {
		font-size: 36rpx;
		color: #ff6b6b;
		font-weight: bold;
		margin: 10rpx 0;
		display: block;
	}
	
	.subsidy-info {
		font-size: 24rpx;
		color: #52c41a;
	}
}

.purchase-history, .water-transfer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
	
	text {
		font-size: 28rpx;
		color: #333;
	}
}

.purchase-type {
	margin-bottom: 30rpx;
	
	.type-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.sub-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.sub-desc {
			font-size: 24rpx;
			color: #999;
			margin-left: 16rpx;
		}
	}
	
	.base-packages {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
		
		.package-item {
			flex: 1;
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			border: 2rpx solid #e8e8e8;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			
			&.package-selected {
				border-color: #1989fa;
				background: rgba(25, 137, 250, 0.05);
				transform: translateY(-2rpx);
			}
			
			&:active {
				transform: scale(0.98);
			}
			
			.package-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.amount {
					font-size: 48rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
					
					.unit {
						font-size: 24rpx;
						font-weight: normal;
						color: #666;
						margin-left: 4rpx;
					}
				}
				
				.price {
					font-size: 36rpx;
					color: #f56c6c;
					font-weight: bold;
					margin-bottom: 4rpx;
				}
				
				.price-per {
					font-size: 24rpx;
					color: #999;
				}
				
				.save-text {
					position: absolute;
					top: 0;
					right: 0;
					background: #f56c6c;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 0 12rpx 0 12rpx;
				}
			}
		}
	}
	
	.smart-recommend {
		background: rgba(25, 137, 250, 0.1);
		border-radius: 8rpx;
		padding: 16rpx 24rpx;
		
		.recommend-content {
			display: flex;
			align-items: center;
			
			.uni-icons {
				margin-right: 8rpx;
			}
			
			text {
				font-size: 26rpx;
				color: #666;
			}
			
			.recommend-amount {
				color: #1989fa;
				font-weight: bold;
				margin-left: 8rpx;
			}
		}
	}
}
</style>
